<template>
    <div class="merchant-page">
       <div>
           <el-form>
             <el-form-item label="任务编码：">
                 <el-input placeholder="请输入任务编码" v-model="searchForm.taskCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="计划编码：">
                 <el-input placeholder="请输入计划编码" v-model="searchForm.planCode" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="店铺名称：">
                 <el-input placeholder="请输入店铺名称" v-model="searchForm.shopName" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="商品外部ID：">
                 <el-input placeholder="请输入商品外部ID" v-model="searchForm.productId" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="商户账号：">
                 <el-input placeholder="请输入商户账号" v-model="searchForm.merchantPhone" size="small" clearable></el-input>
             </el-form-item>
             <el-form-item label="订单号：">
                 <el-input placeholder="请输入订单号" v-model="searchForm.orderNum" size="small" clearable></el-input>
             </el-form-item>
              <el-form-item label="任务状态：">
                   <el-select v-model="searchForm.status" placeholder="请选择任务状态" size="small">
                        <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="审核状态：">
                    <el-select v-model="searchForm.checkStatus" placeholder="请选择审核状态" size="small">
                         <el-option v-for="(item, index) in checkStatusData" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="平台类型：">
                     <el-select v-model="searchForm.platformType" placeholder="请选择平台类型" size="small">
                          <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="授权状态：">
                      <el-select v-model="searchForm.authorize" placeholder="请选择授权状态" size="small">
                           <el-option v-for="(item, index) in authorizeData" :key="index" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="增权单：">
                       <el-select v-model="searchForm.zqd" placeholder="请选择是否增权单" size="small">
                            <el-option v-for="(item, index) in zqdData" :key="index" :label="item.name" :value="item.id"></el-option>
                       </el-select>
                   </el-form-item>
               <el-form-item label="任务开始时间 ：">
                   <div class="block">
                   <el-date-picker  size="small" @change="changeTime"  v-model="searchTime" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                   </div>
               </el-form-item>
               <el-form-item label="是否标旗：">
                    <el-select v-model="searchForm.flagStatus" placeholder="请选择标旗状态" size="small">
                         <el-option v-for="(item, index) in flagList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
               <el-form-item label="任务创建时间 ：">
                   <div class="block">
                  <el-date-picker size="small" v-model="creatTime" type="datetimerange" @change="changeCreatTime" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
                   </div>
               </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>

           </el-form>

       </div>
       <div>
           <el-table :data="tableData" border>
               <el-table-column prop="begin_time" label="任务开始时间"></el-table-column>
               <el-table-column prop="create_time" label="任务创建时间"></el-table-column>
               <el-table-column prop="status_name"  label="任务状态"></el-table-column>
               <el-table-column prop="task_code"  label="任务编码"></el-table-column>
               <el-table-column prop="plan_code"  label="计划编码"></el-table-column>
               <el-table-column prop="order_num"  label="订单号"></el-table-column>
               <el-table-column prop="platform_type_name" label="平台类型"></el-table-column>
               <el-table-column prop="merchant_phone" label="商户账号"></el-table-column>

               <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
               <el-table-column prop="bind_status"  label="授权状态"></el-table-column>
               <el-table-column prop="zqd"  label="增权单"></el-table-column>
               <el-table-column prop="flag_status_name"  label="是否标旗"></el-table-column>
               <el-table-column prop="product_id" label="商品外部ID"></el-table-column>
               <el-table-column prop="platform_name" label="推手平台账号"></el-table-column>

               <!-- <el-table-column prop="push_phone" label="推手账号"></el-table-column> -->

               <el-table-column prop="pay_img"  label="付款截图">
                <div slot-scope="scope">
                  <div class="pay-img-cover-preview" @mouseenter="displayLargeImage" @mouseleave="hideLargeImage" v-if="scope.row.pay_img">
                    <img class="cover-preview__small" style="height: 70px;" v-if="scope.row.pay_img" :src="scope.row.pay_img">
                    <img class="cover-preview__large" :src="scope.row.pay_img">
                  </div>
                  <div>暂无</div>
                </div>
               </el-table-column>
               <el-table-column prop="pay_money" label="应付金额"></el-table-column>
               <el-table-column prop="real_pay" label="实付金额"></el-table-column>
                <el-table-column prop="other_pay" label="推手填付款金额"></el-table-column>
           </el-table>
           <div class="export-box">
             <el-button class="export-btn" @click="exportExcel">导出</el-button>
           </div>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div>
       </div>
    </div>

</template>
<script>
import {apiPromoterSaleTask} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    token: window.sessionStorage.getItem("token"),
                    page: 1,
                    pageSize: 10,
                    shopName: '',
                    productId: '',
                    planCode: '',
                    taskCode: '',
                    merchantPhone: '',
                    status: '',
                    startTime: '',
                    endTime: '',
                    authorize: '',
                    checkStatus: '',
                    platformType: '',
                    zqd: '',
                    orderNum: '',
                    startCreateTime: '',
                    endCreateTime: '',
                    flagStatus: ''
                },
                pageTotal: 0,
                searchTime: [],
                creatTime: [],
                statusData: [{
                  id: '',
                  name: '全部'
                },{
                  id: 1,
                  name: '等待执行'
                },{
                  id: 2,
                  name: '等待操作'
                },{
                  id: 3,
                  name: '正在操作'
                },{
                  id: 4,
                  name: '执行成功'
                },{
                  id: 5,
                  name: '执行失败'
                },{
                  id: 6,
                  name: '人工终止'
                },{
                  id: 7,
                  name: '商家终止'
                },{
                  id: 8,
                  name: '超时失败'
                },{
                  id: 9,
                  name: '创建中'
                }],
                checkStatusData: [{
                  id: '',
                  name: '全部'
                },{
                  id: 1,
                  name: '待审核'
                },{
                  id: 2,
                  name: '进入人工审核'
                },{
                  id: 3,
                  name: '审核成功'
                },{
                  id: 4,
                  name: '审核失败'
                }],
                platformTypeList:[],
                shopTypeList: window.sessionStorage.getItem("shopTypeList"),
                platformTypeData: [{
                  id: '',
                  name: '全部'
                },{
                  id: 1,
                  name: '淘宝'
                },{
                  id: 2,
                  name: '天猫'
                },{
                  id: 3,
                  name: '京东'
                },{
                  id: 4,
                  name: '1688'
                },{
                  id: 13,
                  name: '唯品会'
                },{
                  id: 15,
                  name: '拼多多'
                }],
                authorizeData: [{
                  id: '',
                  name: '全部'
                },{
                  id: 1,
                  name: '是'
                },{
                  id: 2,
                  name: '否'
                }],
                flagList:[{
                  id: '',
                  name: '全部'
                },{
                  id: 1,
                  name: '是'
                },{
                  id: 2,
                  name: '否'
                }],
                zqdData: [{
                  id: '',
                  name: '全部'
                },{
                  id:1,
                  name: '是'
                },{
                  id:2,
                  name: '否'
                }]
            }
        },
        created () {
            this.getTableData()
            if(!this.shopTypeList || this.shopTypeList == null){
              this.platformTypeList = this.platformTypeData
            } else {
              let shopShowTypeArr = this.shopTypeList.split(',')
              for(var i in this.platformTypeData){
                if(shopShowTypeArr.indexOf(this.platformTypeData[i].id.toString()) >=0) {
                  this.platformTypeList.push(this.platformTypeData[i])
                }
              }
            }
        },
        methods:{
            getTableData (){
                this.$showLoading()
                apiPromoterSaleTask(this.searchForm).then(res =>{
                  this.tableData = res.data
                  this.pageTotal = res.count
                  this.$hideLoading()
                }).catch(res => {
                  this.$hideLoading()
                  this.$message.error('数据加载失败')
                })
            },
            getStatusName(row){
              for(var i in this.statusData){
                if(this.statusData[i].id == row.status){
                  return this.statusData[i].name
                }
              }
            },
            searchData(){
                this.getTableData()
            },
            handleSizeChange(val){
                this.searchForm.limit = val;
      	        this.getTableData()
            },
            handleCurrentChange(val){
                this.searchForm.page = val;
      	        this.getTableData()
            },
            changeCreatTime(val){
              if (this.creatTime == null) {
                this.searchForm.startCreateTime =  ''
                this.searchForm.endCreateTime =  ''
              } else{
                this.searchForm.startCreateTime =  this.changeTimestamp(val[0])
                this.searchForm.endCreateTime =  this.changeTimestamp(val[1])
              }
            },
            changeTime(val){
             if (this.searchTime == null) {
               this.searchForm.startTime =  ''
               this.searchForm.endTime =  ''
             } else{
               this.searchForm.startTime =  this.changeTimestamp(val[0])
               this.searchForm.endTime =  this.changeTimestamp(val[1])
             }
            },
            changeTimestamp(time){
              var d = new Date(time);
              var s = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
              return new Date(s).getTime() /1000;
            },
            hideLargeImage(e) {
              e.target.children[1].style.display = 'none';
            },
            displayLargeImage(e) {
              const parentPosition = e.target.getBoundingClientRect();
              const target = e.target.children[1];
              target.style.display = 'block';
              const targetPosition = target.getBoundingClientRect();
              target.style.left = `${parentPosition.left - targetPosition.width}px`;
              target.style.top = `${parentPosition.top - (targetPosition.height)/2}px`;
            },
            exportExcel(){
              this.$showLoading()
              let uid = window.sessionStorage.getItem("uid")
              let downloadUrl = this.BASE_API_URL + 'baseapi/promoterBase/promoterSaleTaskExport'
              let downloadParam = '?uid=' + uid + '&productId=' + this.searchForm.productId + '&merchantPhone=' + this.searchForm.merchantPhone + '&planCode=' + this.searchForm.planCode + '&taskCode=' + this.searchForm.taskCode
               + '&shopName=' + this.searchForm.shopName  + '&status=' + this.searchForm.status  + '&startTime=' + this.searchForm.startTime  + '&endTime=' + this.searchForm.endTime  + '&authorize=' + this.searchForm.authorize
               + '&checkStatus=' + this.searchForm.checkStatus + '&platformType=' + this.searchForm.platformType  + '&zqd=' + this.searchForm.zqd  + '&orderNum=' + this.searchForm.orderNum  + '&startCreateTime=' + this.searchForm.startCreateTime
               + '&endCreateTime=' + this.searchForm.endCreateTime
              window.location.href = downloadUrl + downloadParam
              setTimeout(()=>{
                 this.$hideLoading()
                 this.$message.warning('请耐心等待表格下载')
              },10000)
            }
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.commissionText {
    text-align: right;
    color: red;
    margin-bottom: 10px;
}
.export-box {
  display: inline-block;
  float: left;
  margin-top: 20px;
  .export-btn {
    padding: 8px 15px;
    color: #FFFFFF;
    background: #0e7cee;

  }
}
.pay-img-cover-preview {
      position: relative;

      .cover-preview__small {
        margin: 0 auto;
        display: flex;
        width: 80%;
      }

      .cover-preview__large {
        display: none;
        position: fixed;
        box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
        left: 0;
        top: -100%;
        width: 300px;
        max-width: 25%;
        z-index: 9;
      }
  }
</style>
